<%@ include file="/WEB-INF/views/include.jsp"%>
<%@ page session="false"%>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Content Type</title>
</head>
<body>

	<ul data-tabs="tabs" class="tabs">
            <li class="active"><a href="#home">List Content Type</a></li>
            <li class=""><a href="#add">Add</a></li>
            <li id="tabEdit" class=""><a href="#edit">Edit</a></li>
    </ul>

	<div class="tab-content" id="my-tab-content">
		<!-- view list content type -->
         <div id="home" class="active">
         		<button id="addContentType" class="btn primary" onclick="addContentType();">Add</button>
				<table class="search">
					<tr>
						<th><fmt:message key="contenttype.form.id" />
						</th>
						<th><fmt:message key="contenttype.form.name" />
						</th>
						<th><fmt:message key="contenttype.form.Registered" />
						</th>
						<th><fmt:message key="contenttype.form.CreatedBy" />
						</th>
						<th><fmt:message key="contenttype.form.Role" />
						</th>
					</tr>
					<c:forEach items="${contenttypes}" var="contenttype">
						<tr class="${contenttype.id}">
							<c:url var="editUrl" value="/bo/content/edit-contenttype">
								<c:param name="id" value="${contenttype.id}" />
							</c:url>
							<sec:authorize access="hasRole('ROLE_ADMIN')">
								<c:url var="deleteUrl" value="/bo/content/delete-contenttype">
									<c:param name="id" value="${contenttype.id}" />
								</c:url>
							</sec:authorize>
	
							<td>${contenttype.id}</td>
							<td>${contenttype.name}</td>
							<td><fmt:formatDate value="${contenttype.createdDate}"
									pattern="yyyy-MM-dd hh:mm:ss" /></td>
							<td>${contenttype.createdBy}</td>
							<td>
								<a href="#" onclick="showEditContentType('${editUrl}')"> 
									<fmt:message key="button.edit" /> 
								</a>
								<sec:authorize access="hasRole('ROLE_ADMIN')">
									<a href="#"	onclick="setInfoForDeleteContentType('${deleteUrl}','${contenttype.name}','${contenttype.id}');"><img src="/groupon/images/icons/de-active.png" title="Delete Content Type" width="16" height="16" /></a>
								</sec:authorize>
							</td>
						</tr>
					</c:forEach>
				</table>
			</div>
			<!-- add content type -->
            <div id="add" class="">
            	<c:url var="addUrl" value="/bo/content/add-contenttype">
				</c:url>
             	<form>
	              <fieldset id="info">
	                <legend>CONTENT TYPE INFORMATION</legend>
	                <div class="clearfix">
				            <label for="nameContentType">Name Content Type</label>
				            <div class="input">
				              <input type="text" size="30" name="nameContentType" id="nameContentType" class="xlarge">
				            </div>
			          </div>
	              </fieldset>
	              <fieldset id="element">
	                <legend>ELEMENT CONTENT TYPE</legend>
	                <input class="btn primary" type="button" onclick="addElementContentType('#add');" value="Add"></input>
	                <table class="zebra-striped">
	                	<thead>
							<tr>
								<th><fmt:message key="contenttype.form.code_element" /></th>
								<th><fmt:message key="contenttype.form.name_element"/></th>
								<th><fmt:message key="contenttype.form.type_element" /></th>
								<th><fmt:message key="contenttype.form.role_element" /></th>
							</tr>
						</thead>
						<tbody>
						</tbody>
	     		  	</table>
	              </fieldset>
	              <div align="center" style="padding: 14px 19px;" class="well">
		              <input id="button1" type="button" onclick="submitFormAddContentType('${addUrl}')" class="btn primary" value="submit"/> 
		              <input id="button2" type="button" value="Cancel" onclick="cancel()" class="btn success"/>
	              </div>
	           	</form>
            </div>
            
            <!-- edit content type -->
            <div id="edit" class="">
            	<input type="hidden" id="hiddenUrlEdit" name="hiddenUrlEdit" value="" />
             	<form>
	              <fieldset id="info">
	                <legend>CONTENT TYPE INFORMATION</legend>
	                <div class="clearfix">
				            <label for="nameContentType">Name Content Type</label>
				            <div class="input">
				              <input type="text" size="30" name="nameContentType" id="nameContentType" class="xlarge">
				            </div>
			          </div>
	              </fieldset>
	              <fieldset id="element">
	                <legend>ELEMENT CONTENT TYPE</legend>
	                <input class="btn primary" type="button" onclick="addElementContentType('#edit');" value="Add"></input>
	                <table class="zebra-striped">
	                	<thead>
							<tr>
								<th><fmt:message key="contenttype.form.code_element" /></th>
								<th><fmt:message key="contenttype.form.name_element"/></th>
								<th><fmt:message key="contenttype.form.type_element" /></th>
								<th><fmt:message key="contenttype.form.role_element" /></th>
							</tr>
						</thead>
						<tbody>
						</tbody>
	     		  	</table>
	              </fieldset>
	              <div align="center" style="padding: 14px 19px;" class="well">
		              <input id="button1" type="button" onclick="submitFormEditContentType()" class="btn primary" value="submit"/> 
		              <input id="button2" type="button" onclick="cancel()" value="Cancel" class="btn success"/>
	              </div>
	           	</form>
            </div>
     </div>

	
	<br/>
	<script type="text/javascript">
		//disable tab edit
		jQuery(document).ready(function(){
			jQuery("#tabEdit").hide();
		})
			
		//click button add jump to tab Add
		function addContentType(){
			jQuery("a[href='#add']").click();
			cleanFormAdd();
		}
		//clean form in tab Add
		function cleanFormAdd(){
			jQuery("#add #nameContentType").val("");
			jQuery("#add tbody tr").remove();
		}

		//click tab Edit,show content type
		function showEditContentType(urlEdit){
			jQuery("#edit tbody tr").remove();
			jQuery("#tabEdit").show();
			jQuery("a[href='#edit']").click();
			jQuery.ajax({
				type: "GET",
				url: urlEdit,
				context: document.body,
				success: function(contentType){
					setValueToEditForm(urlEdit, contentType);
				}
				
			})
		}
		//set value to tab Edit
		function setValueToEditForm(urlEdit, contentType){
			jQuery("#edit input[name=hiddenUrlEdit]").val(urlEdit);
			jQuery("#edit #nameContentType").val(contentType.name);
			if(contentType.data.length > 0){
				var dataElementEdit = jQuery.parseJSON(contentType.data)
				for(var i = 0; i < dataElementEdit.length ; i++){
					code = dataElementEdit[i].code;		
					name = dataElementEdit[i].name;
					type = dataElementEdit[i].type;
					deleteEle = "<a href='#' onclick='deleteElement(\"#edit\",\"" + code + "\")'><fmt:message key='button.delete' /></a>";
					editEle = "<a href='#' onclick='editElement(\"#edit\",\"" + code + "\")'><fmt:message key='button.edit' /></a>";
					jQuery( "#edit tbody" ).append( "<tr class='" + code + "'>" +
							"<th class='code'>" + code + "</th>" + 
							"<th>" + name + "</th>" + 
							"<th>" + type + "</th>" +
							"<th>" +  deleteEle  + "  " + editEle + "</th>" +
						"</tr>" );
				}
			}
		}
		//show dialog and add element to contenttype in tab Edit/Add
		function addElementContentType(divTab){
			jQuery("#modal-add-element-contenttype").modal({
				  show:true
			  });
			jQuery('input[name=hiddenDivTab]').val(divTab);
			resetValueForm(jQuery('#modal-add-element-contenttype #codeElement'));
			resetValueForm(jQuery('#modal-add-element-contenttype #nameElement'));
		}
		function resetValueForm(obj){
			obj.val('');
			obj.next().remove();
			obj.parent().parent().removeClass("error");
		}
		//parse element content type to JSON in tab Edit/Add
		function getElementContentTypeToJSON(divTab){
			var dataElement="";
			divEleTr = divTab + " tbody tr";
			jQuery(divEleTr).each(function(){
				var info = "";
				info += '{"code":"' + $(this).find("th").eq(0).html() + '",';
				info += '"name":"' + $(this).find("th").eq(1).html() + '",';
				info += '"type":"' + $(this).find("th").eq(2).html() + '"}';
				if(dataElement.length > 0){
					dataElement = dataElement + "," +info;	
				}else{
					dataElement = info;
				}
			})
			if(dataElement.length > 0){
				dataElement = "[" + dataElement + "]";
			}
			return dataElement;
		}

		function checkValue(obj){
			if ( obj.val().length > 0 ) {
					obj.parent().parent().removeClass("error");
					return true;
				} else {
					obj.parent().parent().addClass("error" );
					return false;
				}
		}
		//submit form add Content Type in tab Add
		function submitFormAddContentType(addUrl){
			var sValid = true;
			sValid = sValid && checkValue(jQuery('#add #nameContentType'));
			var dataContentType = getElementContentTypeToJSON("#add");
			var nameContentType = jQuery("#add #nameContentType").val();
			if(sValid){
				jQuery.ajax({
	    			  url: addUrl,
	    			  data: "name=" + nameContentType + "&dataContentType=" + dataContentType,
	    			  context: document.body,
	    			  success: function(dataResponse){
	    				if(dataResponse == "200"){
	    					window.location.reload();
		    			}else{
		    				jQuery("#add #info").append(showAlert(nameContentType))
				    	}
	    			  }
	    			});
			}
			return sValid;
		}

		//submit form edit Content Type in tab Edit
		function submitFormEditContentType(){
			var sValid = true;
			sValid = sValid && checkValue(jQuery('#edit #nameContentType'));
			var dataContentType = getElementContentTypeToJSON("#edit");
			var nameContentType = jQuery("#edit #nameContentType").val();
			urlEdit = jQuery('#edit input[name=hiddenUrlEdit]').val();
			if(sValid){
				jQuery.ajax({
					  type: "POST",	
	    			  url: urlEdit,
	    			  data: "name=" + nameContentType + "&dataContentType=" + dataContentType,
	    			  context: document.body,
	    			  success: function(dataResponse){
	    				if(dataResponse == "200"){
	    					window.location.reload();
		    			}else{
		    				jQuery("#edit #info").append(showAlert(nameContentType))
				    	}
	    			  }
	    			});
			}
			return sValid;
		}
		//show alert if exist name content type
		function showAlert(name){
			return '<div class="alert-message error"><a href="#" class="close">×</a><p><strong>' + name + '</strong> really exist.</p></div>';
		}
		//reload page
		function cancel(){
			window.location.reload();
		}
	</script>
	<jsp:include page="/WEB-INF/views/bo/content/add-element-contenttype.jsp" flush="true"/>
	<jsp:include page="/WEB-INF/views/bo/content/edit-element-contenttype.jsp" flush="true"/>
	<jsp:include page="/WEB-INF/views/bo/content/delete-contenttype.jsp" flush="true"/>
	
</body>
</html>
